<template>
  <view class="fansNumber" :class="[`theme${theme}`]">
    <view
      class="item"
      v-for="item of list"
      :key="item.type"
      @click="goNextPage(item)"
    >
      <uv-icon size="30rpx" :name="item.icon"></uv-icon>
      <view class="itemLabel">{{ item.label }}</view>
      <view class="itemNumber">{{ item[item.dataKey] || 0 }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, toRef } from "vue";
import getAssetsImages from "/utils/getAssetsImages.js";

const props = defineProps({
  theme: {
    type: String,
    default: "white", // blue
  },
  hasCollect: {
    type: Boolean,
    default: false,
  },
});

const hasCollect = toRef(props, "hasCollect");
const theme = toRef(props, "theme");

const list = ref([
  {
    type: "follow",
    label: "关注",
    dataKey: "",
    icon: getAssetsImages(`accountIcon/follow-${theme.value}`, "png"),
    nextPage: "/pages/my/follow/index",
  },
  {
    type: "fans",
    label: "粉丝",
    dataKey: "",
    icon: getAssetsImages(`accountIcon/fans-${theme.value}`, "png"),
    nextPage: "/pages/my/fans/index",
  },
]);

if (hasCollect.value) {
  list.value.push({
    type: "collect",
    label: "收藏",
    dataKey: "",
    icon: getAssetsImages(`accountIcon/collect-${theme.value}`, "png"),
    nextPage: "/pages/my/collect/index",
  });
}

const goNextPage = (item) => {
  uni.navigateTo({
    url: item.nextPage,
  });
};
</script>

<style lang="scss">
.fansNumber {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.themewhite {
  color: #fff;
  font-size: 28rpx;

  .item {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.themeblue {
  color: #999999;
  font-size: 28rpx;

  .item {
    border-right: 1px solid rgba(169, 169, 169, 0.2);
  }
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);

  &:last-child {
    border-right: 0;
  }
}

.itemLabel {
  margin-left: 10rpx;
}
.itemNumber {
  margin-left: 4rpx;
}
</style>
